<template>
	<view class="container">
		<scroll-view class="chat" scroll-y="true" scroll-with-animation="true"  :scroll-into-view="scrollToView">
			<view class="chat-main" :style="{paddingBottom:`${chatInputHeight}px`}">
				<view style="align-self: flex-end;">
					<uni-list>
						<uni-list-item v-for="(item,index) in listData" direction="column" style="background-color: rgba(244, 244, 244, 1)">
							<template  v-slot:body>
								<view :id="`item_${index}`" :class="`row row_${item.type}`">
									<view v-if="item.type == 'send'" class="title">
										<uni-icons type="cloud-upload"></uni-icons>	{{item.time}}
									</view>
									<view v-if="item.type == 'recv'" class="title">
										{{item.time}}  <uni-icons type="cloud-download"></uni-icons>
									</view>
									<view class="data">{{item.v}}</view>
								</view>
							</template>					
						</uni-list-item>
					</uni-list>
				</view>
			</view>
		</scroll-view>		
		<view class="bottom" id="bottomRef" ref="bottomRef">
			<chat-input ref="chatInputRef" @onSend="send"></chat-input>
		</view>
		<settings-vue ref="settingsRef"></settings-vue>
	</view>
</template>

<script setup>
	import {ref,reactive,computed,onMounted } from "vue"
	import { onNavigationBarButtonTap } from '@dcloudio/uni-app' 
	import settingsVue from '../../components/settings/index.vue';
	import chatInput from '../../components/chatInput/index.vue'
	const scrollToView=ref('');
	
	const props = defineProps({
	    usb: String,
	});
	
	const settingsRef=ref(null);
	const chatInputRef=ref(null);
	const chatInputHeight=ref(60);
	const bottomRef=ref(null)
	const timer=ref(0);
	const queryBottomHeight=()=>{
		clearTimeout(timer.value);
		if(bottomRef.value)
		{
			uni.createSelectorQuery().select('#bottomRef').boundingClientRect(data => {
				if(chatInputHeight.value != data.height){
					chatInputHeight.value = data.height;
				}
			}).exec()
		}
		timer.value = setTimeout(()=>{
			queryBottomHeight();
		},50)
	}
	
	onMounted(()=>{		
		queryBottomHeight();
	});
	
	const listData=reactive([]);
	
	uni.setNavigationBarTitle({
		title: `${props.usb}调试`
	});
	onNavigationBarButtonTap((e)=>{
		console.log('index onNavigationBarButtonTap',e,settingsRef.value)
		settingsRef.value.show();
		// if(e.index === 0){
		// 	uni.navigateTo({
		// 		url: '/pages/settings/settings'
		// 	});
		// }
	});
	
	const send=(v)=>{
		console.log('onSend',v)
		listData.push({
			type:'send',
			time:(new Date()).format("yyyy-MM-dd hh:mm:ss.S"),
			v:v
		});
		scrollToView.value = `item_${listData.length - 1}`;
	}
	
	const getData =() =>{
	  var result = "01 02 03 04 0B AA CC B0";
	  var max=Math.floor(Math.random() * 5)
	  for(var i=0;i<max;i++){
		  result+="01 02 03 04 0B AA CC B0"
	  }
	  return result;
	}

	for(var i=0;i<2;i++){
		if(i%2 == 0){
			listData.push({
				type:'send',
				time:'2024-09-23 15:33:20',
				v:getData()
			})
		}else{
			listData.push({
				type:'recv',
				time:'2024-09-23 15:33:20',
				v:getData()
			})
		}
	}
</script>

<style>
page {
	position: relative;
	width:100%;
	height: 100%;
}
.container {	
	position: relative;
	height: 100%;
	width:100%;
	background-color: rgba(244, 244, 244, 1);
	
}

.chat{	
	height: 100%;
}

.chat-main {	
	display: flex;
	flex-direction:row;
}
		
.bottom{
	width:100%;
	position: fixed;
	bottom: 0;
	z-index: 100;
}
.scroll{
	height:calc(100% - 50px)
}	
	
.row{
	padding:10px;
	width:90%;
}
.row_send{	
	float:left;
}

.row_recv{
	float:right;
}

.title{
	font-size: 12px;
}

.row_send .title{
	text-align: left;
}


.row_recv .title{
	text-align:right;
}

.data{
	display: inline-block;
	max-width: 100%;
	padding:10px;
	border-radius: 5px;
	color:#fff;	
}

.row_send .data{
	float:left;
	background-color: limegreen;
}

.row_recv .data{	
	float:right;	
	background-color: #fff;
	color:#000;
}
</style>
